<template>
  <view class="parse-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="nav-left">
        <uni-icons type="left" size="18" color="#fff" @tap="navigateBack"></uni-icons>
        <text class="nav-title">解析成功</text>
      </view>
      <view class="nav-right">
        <uni-icons type="ellipsis" size="18" color="#fff"></uni-icons>
        <uni-icons type="scan" size="18" color="#fff" style="margin-left: 20px;"></uni-icons>
      </view>
    </view>
    
    <!-- 标签页切换 -->
    <view class="tabs">
      <view class="tab-item" :class="{ active: activeTab === 'media' }" @tap="switchTab('media')">
        {{ mediaType === 'image' ? '图集' : '视频' }}
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'cover' }" @tap="switchTab('cover')">
        封面
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'title' }" @tap="switchTab('title')">
        标题
      </view>
    </view>
    
    <!-- 主要内容区域 - 使用scroll-view作为滚动容器 -->
    <scroll-view class="content" scroll-y>
      <!-- 图片类型内容 -->
      <view v-if="mediaType === 'image' && activeTab === 'media'">
        <!-- 保存全部按钮 -->
        <view class="save-all-container">
          <button class="save-all-btn" @click="downloadAllImages">
            保存图片(全部)
          </button>
        </view>
        
        <!-- 图片网格 -->
        <view class="image-grid">
          <view class="image-item" v-for="(item, index) in mediaList" :key="index">
            <view class="image-wrapper">
              <image :src="item.url" mode="aspectFill" class="image-content" @error="handleImageError(index)">
                <!-- 加载失败占位图 -->
                <view v-if="item.loadError" class="image-error-placeholder">
                  <uni-icons type="image" size="40" color="#cccccc"></uni-icons>
                </view>
              </image>
              <view class="checkbox" :class="{ 'checked': item.selected }" @tap.stop="toggleSelection(index)">
                <uni-icons v-if="item.selected" type="success" size="14" color="#fff"></uni-icons>
              </view>
            </view>
            <view class="image-footer">
              <text class="save-text">保存图片</text>
              <view class="checkbox-small" :class="{ 'checked': item.selected }" @tap.stop="toggleSelection(index)">
                <uni-icons v-if="item.selected" type="success" size="12" color="#fff"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 视频类型内容 -->
      <view v-else-if="mediaType === 'video' && activeTab === 'media'">
        <!-- 视频预览区 -->
        <view class="video-preview">
          <video :src="currentVideoUrl" controls class="video-player" :show-center-play-btn="true" poster=""></video>
          <view class="video-duration" v-if="videoDuration">
            {{ formatDuration(videoDuration) }}
          </view>
        </view>
        
        <!-- 分辨率选择 -->
        <view class="resolution-container">
          <picker :range="resolutions" @change="onResolutionChange">
            <view class="resolution-picker">
              {{ selectedResolution }}
              <uni-icons type="bottom" size="12" color="#333"></uni-icons>
            </view>
          </picker>
        </view>
        
        <!-- 操作按钮区 -->
        <view class="action-buttons">
          <button class="copy-btn" @click="copyVideoLink">复制链接</button>
          <button class="download-btn" @click="downloadVideo">下载视频</button>
        </view>
        
        <!-- 备用下载路线 -->
        <view class="alternative-download">
          <button class="alt-download-btn" @click="alternativeDownload">备用下载路线</button>
        </view>
        
        <!-- 分享区域 -->
        <view class="share-section">
          <view class="share-content">
            <uni-icons type="chat" size="16" color="#2BB289"></uni-icons>
            <text class="share-text">分享给好友，共同解锁有趣的视频。</text>
          </view>
          <button class="share-btn" @click="shareVideo">分享</button>
        </view>
        
        <!-- 客服支持区 -->
        <view class="support-section">
          <button class="support-btn" @click="showSupport">下载&保存失败?</button>
          <button class="service-btn" @click="contactService">在线客服</button>
        </view>
      </view>
      
      <!-- 封面标签页内容 -->
      <view v-else-if="activeTab === 'cover'" class="cover-content">
        <view class="cover-container">
          <image v-if="mediaType === 'image'" :src="mediaList[0].url" mode="aspectFit" class="cover-image"></image>
          <video v-else-if="mediaType === 'video'" :src="currentVideoUrl" controls class="cover-video" :show-center-play-btn="true"></video>
        </view>
      </view>
      
      <!-- 标题标签页内容 -->
      <view v-else-if="activeTab === 'title'" class="title-content">
        <view class="title-container">
          <text class="media-title">{{ mediaTitle || '暂无标题信息' }}</text>
          <text class="media-desc">这是媒体的描述信息</text>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-else-if="!isLoading">
        <uni-icons type="empty" size="60" color="#e0e0e0"></uni-icons>
        <text class="empty-text">暂无媒体内容</text>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading-state" v-if="isLoading">
        <uni-icons type="spinner-cycle" size="36" color="#2979FF" animation="spin"></uni-icons>
        <text class="loading-text">加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import http from '@/utils/http.js'

export default {
  data() {
    return {
      mediaList: [], // 媒体列表
      isLoading: true, // 加载状态
      platform: '', // 平台信息
      mediaType: '', // 媒体类型 'image' 或 'video'
      activeTab: 'media', // 当前激活的标签页
      selectedResolution: '1080p', // 默认选中的分辨率
      resolutions: ['1080p', '720p', '480p', '360p'], // 分辨率选项
      mediaTitle: '', // 媒体标题
      currentVideoUrl: '', // 当前视频URL
      videoDuration: null, // 视频时长
      resolutionUrls: {}, // 不同分辨率的视频URL映射
      coverUrl: '' // 新增：封面URL
    }
  },
  
  onLoad(options) {
    // 获取传递过来的参数
    if (options.urls) {
      try {
        // 解析URL参数
        const responseData = JSON.parse(decodeURIComponent(options.urls))
        this.platform = options.platform || ''
        
        // 处理新的数据结构
        if (responseData.type !== undefined) {
          // 这是新的UrlDataResponse格式
          this.processUrlDataResponse(responseData)
        } else {
          // 兼容旧的List<String>格式
          this.processMediaUrls(responseData)
        }
      } catch (error) {
        console.error('解析URL参数失败:', error)
        uni.showToast({
          title: '解析参数失败',
          icon: 'none'
        })
        this.isLoading = false
      }
    } else {
      this.isLoading = false
    }
  },
  
  methods: {
    // 新增：处理UrlDataResponse格式的数据
    processUrlDataResponse(response) {
      // 设置媒体类型 (0=视频, 1=图文)
      this.mediaType = response.type === 0 ? 'video' : 'image'
      
      // 设置标题
      this.mediaTitle = response.title || ''
      
      // 设置封面URL
      this.coverUrl = response.coverUrl || ''
      
      // 处理媒体URL列表
      if (response.dataUrl && Array.isArray(response.dataUrl)) {
        this.mediaList = response.dataUrl.map(url => ({
          url: url,
          type: this.mediaType,
          selected: true,
          loadError: false
        }))
        
        // 初始化视频相关信息
        if (this.mediaType === 'video' && this.mediaList.length > 0) {
          this.currentVideoUrl = this.mediaList[0].url
          // 初始化不同分辨率的URL
          this.resolutionUrls = {
            '1080p': this.mediaList[0].url,
            '720p': this.mediaList[0].url,
            '480p': this.mediaList[0].url,
            '360p': this.mediaList[0].url
          }
          // 尝试获取视频时长
          this.getVideoDuration(this.mediaList[0].url)
        }
      }
      
      this.isLoading = false
    },
    
    // 原有方法保持不变，但添加兼容性处理
    processMediaUrls(urls) {
      let tempMediaType = ''
      
      if (!urls || !Array.isArray(urls)) {
        // 如果不是数组，尝试作为单个URL处理
        const singleUrl = urls || ''
        if (singleUrl) {
          tempMediaType = this.getMediaType(singleUrl)
          this.mediaList = [{
            url: singleUrl,
            type: tempMediaType,
            selected: true,
            loadError: false
          }]
          if (tempMediaType === 'video') {
            this.currentVideoUrl = singleUrl
            // 初始化不同分辨率的URL（实际项目中应该从服务器获取）
            this.resolutionUrls = {
              '1080p': singleUrl,
              '720p': singleUrl,
              '480p': singleUrl,
              '360p': singleUrl
            }
            // 尝试获取视频时长
            this.getVideoDuration(singleUrl)
          }
        }
      } else {
        // 处理URL数组
        this.mediaList = urls.map((url, index) => {
          const type = this.getMediaType(url)
          if (index === 0) {
            tempMediaType = type
            if (type === 'video') {
              this.currentVideoUrl = url
              // 初始化不同分辨率的URL
              this.resolutionUrls = {
                '1080p': url,
                '720p': url,
                '480p': url,
                '360p': url
              }
              // 尝试获取视频时长
              this.getVideoDuration(url)
            }
          }
          return {
            url: url,
            type: type,
            selected: true,
            loadError: false
          }
        })
      }
      
      this.mediaType = tempMediaType
      this.isLoading = false
    },
    
    // 获取媒体类型
    getMediaType(url) {
      if (!url) return 'unknown'
      
      const lowerUrl = url.toLowerCase()
      if (lowerUrl.endsWith('.jpg') || lowerUrl.endsWith('.jpeg') || 
          lowerUrl.endsWith('.png') || lowerUrl.endsWith('.gif') || 
          lowerUrl.endsWith('.bmp') || lowerUrl.includes('image')) {
        return 'image'
      } else if (lowerUrl.endsWith('.mp4') || lowerUrl.endsWith('.mov') || 
                 lowerUrl.endsWith('.avi') || lowerUrl.endsWith('.wmv') ||
                 lowerUrl.includes('video')) {
        return 'video'
      }
      return 'unknown'
    },
    
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack()
    },
    
    // 切换图片选中状态
    toggleSelection(index) {
      this.mediaList[index].selected = !this.mediaList[index].selected
    },
    
    // 处理图片加载错误
    handleImageError(index) {
      this.mediaList[index].loadError = true
    },
    
    // 获取视频时长
    getVideoDuration(url) {
      // 创建视频元素来获取时长
      const video = document.createElement('video')
      video.src = url
      video.onloadedmetadata = () => {
        this.videoDuration = video.duration
      }
    },
    
    // 格式化视频时长
    formatDuration(seconds) {
      if (!seconds) return '00:00'
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = Math.floor(seconds % 60)
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
    },
    
    // 下载全部图片
    downloadAllImages() {
      const selectedItems = this.mediaList.filter(item => item.selected)
      
      if (selectedItems.length === 0) {
        uni.showToast({
          title: '请先选择要下载的图片',
          icon: 'none'
        })
        return
      }
      
      // 显示下载进度提示
      uni.showLoading({
        title: '开始下载...',
        mask: true
      })
      
      // 依次下载选中的图片
      let downloadedCount = 0
      
      selectedItems.forEach((item, index) => {
        // 延迟下载，避免请求过于密集
        setTimeout(() => {
          this.downloadMedia(item.url, 'image').then(() => {
            downloadedCount++
            
            // 更新下载进度
            uni.showLoading({
              title: `下载中(${downloadedCount}/${selectedItems.length})`,
              mask: true
            })
            
            // 全部下载完成
            if (downloadedCount === selectedItems.length) {
              uni.hideLoading()
              uni.showToast({
                title: '下载完成',
                icon: 'success'
              })
            }
          }).catch(error => {
            console.error('下载失败:', error)
            downloadedCount++
            
            if (downloadedCount === selectedItems.length) {
              uni.hideLoading()
              uni.showToast({
                title: '部分文件下载失败',
                icon: 'none'
              })
            }
          })
        }, index * 1000) // 每个请求间隔1秒
      })
    },
    
    // 下载单个视频
    downloadVideo() {
      if (!this.currentVideoUrl) {
        uni.showToast({
          title: '没有可下载的视频',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '开始下载...',
        mask: true
      })
      
      this.downloadMedia(this.currentVideoUrl, 'video').then(() => {
        uni.hideLoading()
        uni.showToast({
          title: '下载完成',
          icon: 'success'
        })
      }).catch(error => {
        console.error('下载失败:', error)
        uni.hideLoading()
        uni.showToast({
          title: '下载失败，请重试',
          icon: 'none'
        })
      })
    },
    
    // 复制视频链接
    copyVideoLink() {
      if (!this.currentVideoUrl) {
        uni.showToast({
          title: '没有可复制的链接',
          icon: 'none'
        })
        return
      }
      
      uni.setClipboardData({
        data: this.currentVideoUrl,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '复制失败，请重试',
            icon: 'none'
          })
        }
      })
    },
    
    // 备用下载路线
    alternativeDownload() {
      uni.showToast({
        title: '正在准备备用下载...',
        icon: 'none'
      })
      // 这里可以实现备用下载逻辑
    },
    
    // 分享视频
    shareVideo() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    },
    
    // 显示支持信息
    showSupport() {
      uni.showModal({
        title: '下载帮助',
        content: '如果下载失败，请检查网络连接或稍后再试。您也可以尝试备用下载路线。',
        showCancel: false
      })
    },
    
    // 联系客服
    contactService() {
      uni.showToast({
        title: '正在连接客服...',
        icon: 'none'
      })
      // 这里可以实现联系客服的逻辑
    },
    
    // 分辨率变化处理
    onResolutionChange(e) {
      const index = e.detail.value
      this.selectedResolution = this.resolutions[index]
      // 根据分辨率切换视频源
      this.currentVideoUrl = this.resolutionUrls[this.selectedResolution] || this.mediaList[0].url
    },
    
    // 下载媒体文件
    async downloadMedia(url, type) {
      return new Promise((resolve, reject) => {
        // 使用uni.downloadFile下载文件
        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              // 保存文件到本地
              if (type === 'image') {
                // 保存图片
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: () => {
                    resolve()
                  },
                  fail: (err) => {
                    this.handleSaveError(err)
                    reject(err)
                  }
                })
              } else {
                // 保存视频
                uni.saveVideoToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: () => {
                    resolve()
                  },
                  fail: (err) => {
                    this.handleSaveError(err)
                    reject(err)
                  }
                })
              }
            } else {
              reject(new Error(`下载失败，状态码: ${res.statusCode}`))
            }
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    },
    
    // 处理保存失败的错误
    handleSaveError(err) {
      console.error('保存失败:', err)
      
      // 根据错误类型给出不同的提示
      if (err.errMsg.indexOf('auth deny') !== -1 || err.errMsg.indexOf('authorize') !== -1) {
        uni.showModal({
          title: '提示',
          content: '需要您授权保存到相册权限',
          success: (res) => {
            if (res.confirm) {
              // 打开设置页面
              uni.openSetting()
            }
          }
        })
      }
    }
  }
}
</script>

<style scoped>
/* 全局容器 */
.parse-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

/* 顶部导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: linear-gradient(90deg, #4481eb, #04befe);
  color: white;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  margin-left: 15px;
}

.nav-right {
  display: flex;
  align-items: center;
}

/* 标签页切换 */
.tabs {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #eeeeee;
}

.tab-item {
  flex: 1;
  padding: 14px 0;
  text-align: center;
  font-size: 15px;
  color: #666666;
  position: relative;
}

.tab-item.active {
  color: #4481eb;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: #4481eb;
  border-radius: 3px;
}

/* 内容区域 - scroll-view容器 */
.content {
  flex: 1;
  padding: 16px;
  background-color: #f9f9f9;
  box-sizing: border-box;  /* 添加这行，确保padding不会增加总宽度 */
  width: 100%;
}

/* 保存全部按钮容器 */
.save-all-container {
  margin-bottom: 16px;
}

.save-all-btn {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
  transition: all 0.3s ease;
}

.save-all-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 5px rgba(76, 175, 80, 0.2);
}

/* 图片网格 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.image-item {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-item:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.image-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* 图片加载失败占位图 */
.image-error-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 勾选框 */
.checkbox {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 2px solid #dddddd;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: all 0.3s ease;
}

.checkbox.checked {
  background-color: #4CAF50;
  border-color: #4CAF50;
  transform: scale(1.1);
}

/* 图片底部 */
.image-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.save-text {
  font-size: 14px;
  color: #666666;
}

.checkbox-small {
  width: 20px;
  height: 20px;
  border: 1px solid #dddddd;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.checkbox-small.checked {
  background-color: #4CAF50;
  border-color: #4CAF50;
  transform: scale(1.1);
}

/* 视频预览区 */
.video-preview {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
  position: relative;
}

.video-player {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 12px;
}

/* 视频时长显示 */
.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  z-index: 1;
}

/* 分辨率选择 */
.resolution-container {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.resolution-picker {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  padding: 8px 0;
  border-radius: 20px;
  border: 1px solid #dddddd;
  transition: all 0.3s ease;
}

.resolution-picker:active {
  background-color: #eeeeee;
}

/* 操作按钮区 */
.action-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.copy-btn {
  flex: 1;
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3);
  transition: all 0.3s ease;
}

.copy-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2);
}

.download-btn {
  flex: 1;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
  transition: all 0.3s ease;
}

.download-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 5px rgba(76, 175, 80, 0.2);
}

/* 备用下载路线 */
.alternative-download {
  margin-bottom: 16px;
}

.alt-download-btn {
  width: 100%;
  background-color: #FF9800;
  color: white;
  border: none;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3);
  transition: all 0.3s ease;
}

.alt-download-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 5px rgba(255, 152, 0, 0.2);
}

/* 分享区域 */
.share-section {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.share-content {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.share-text {
  font-size: 14px;
  color: #666666;
  margin-left: 8px;
}

.share-btn {
  width: 100%;
  background-color: #2BB289;
  color: white;
  border: none;
  padding: 8px 0;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(43, 178, 137, 0.3);
  transition: all 0.3s ease;
}

.share-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(43, 178, 137, 0.2);
}

/* 客服支持区 */
.support-section {
  display: flex;
  gap: 12px;
}

.support-btn, .service-btn {
  flex: 1;
  background-color: #9C27B0;
  color: white;
  border: none;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
  transition: all 0.3s ease;
}

.support-btn:active, .service-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(156, 39, 176, 0.2);
}

/* 封面内容 */
.cover-content {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cover-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.cover-image, .cover-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
}

/* 标题内容 */
.title-content {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.media-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 12px;
  display: block;
}

.media-desc {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  background-color: white;
  border-radius: 12px;
  margin: 0 16px;
}

.empty-text {
  margin-top: 15px;
  color: #999999;
  font-size: 16px;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  background-color: white;
  border-radius: 12px;
  margin: 0 16px;
}

.loading-text {
  margin-top: 15px;
  color: #666666;
  font-size: 16px;
}

/* 适配不同屏幕尺寸 */
@media screen and (min-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .image-wrapper {
    height: 240px;
  }
  
  .video-player {
    height: 300px;
  }
}

@media screen and (min-width: 1024px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .image-wrapper {
    height: 280px;
  }
  
  .video-player {
    height: 400px;
  }
}
</style>
